<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px">
		<headerOpreate style="margin-bottom: 5px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<el-row :gutter="2">
			<el-col :span="24">
				<div class="bg-purple">
					<div style="padding: 5px" class="panel-content">
						<!--:check-strictly="true"-->
						<el-tree :show-overflow-tooltip="true" style="margin-left: 25px;border: 0;" accordion ref="tree" :data="allMenuDatas" node-key="keyId" show-checkbox :props="defaultProps" :default-checked-keys="defaultCheckedKeys" :default-expanded-keys="defaultExpandedKeys" :expand-on-click-node="true">
						</el-tree>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import $ from 'jquery';
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'

	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				allMenuDatas: [],
				defaultCheckedKeys: [],
				defaultExpandedKeys: [],
				opreateDatas: [{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				},
				{
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_drive el-icon--left',
					name: '保存',
					action: 'saveSubmits'
				}
				],
				defaultProps: {
					children: 'Children',
					label: 'menuname',
					//					id: 'keyId'
				},
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//保存修改
			//node_modules/element-ui/lib/element-ui.commen.js编写方法getCheckedKeysAll，目的是为了获取半选的数据
			saveSubmits() {
				// console.log(this.$refs.tree.getCheckedKeysAll())
				this.$confirm('此操作将保存对该权限的菜单分配，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					HttpServer.httpPost.call(this, '/Api/Menu/MenuBindRole', {
						RoleKeyId: this.templateObj.KeyId,
						MenuKeyId: this.$refs.tree.getCheckedKeysAll(),
						UserId: parseInt(GloabFun.getKeyId())
					}, function(response) {}, function(response) {
						if(response.data.code === 0) {
							this.getMenuByRole();
							this.$notify({
								title: '成功',
								message: '权限菜单分配成功',
								type: 'success',
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},



			
			reloadDatas() {
				this.isReload = true;
				this.getMenuByRole();
			},
			//由于树控件在父级选中时，所有子项会默认选中，不符合需求，所以需要从数组中删除所有含有子项的父级
			traverseTree(arr1,arr2){
				//arr1为默认选中的数,arr2为区域信息数组
				for (var m = 0 ; m < arr1.length; m ++){
					for(var n = 0 ; n < arr2.length; n ++){
						if(arr1[m] == arr2[n].keyId && arr2[n].Children.length > 0){
							arr1.splice(m,1);
							this.traverseTree(arr1,arr2[n].Children);
						}
					}
				}	
			},
			//获取当前权限菜单信息
			getMenuByRole() {
				HttpServer.httpGet.call(this, '/Api/Menu/MenuByRoleNew?RoleKeyId=' + this.templateObj.KeyId, function(response) {}, function(response) {
					// console.log(response)
					if(response.data.code === 0) {
						this.traverseTree(response.data.menuids,response.data.info);
						this.allMenuDatas = response.data.info;
						this.defaultCheckedKeys = response.data.menuids;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				})
			}
		},
		created() {
			this.getMenuByRole();
		}
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.inner-section {
		// margin: 5px 5px;
		// height: 100%;
		// border: 1px solid #BEBEBE;
		.flash-object {
			// margin: 5px 0;
			height: 368px;
			// height: e("calc(100% - 40px)");
			position: relative;
		}
		.opreat-button {
			//text-align: center;
		}
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			// background: #EAF4FF;
			.detail-title {
				text-align: center;
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				padding: 0;
				width: 100%;
				height: 30px;
				// color: white;
				// background-color: #E0E0E0;
				border-bottom: 1px solid #B0B0B0;
				line-height: 30px;
				font-weight: bold;
				// border-radius: 5px;
			}
			.panel-content {
				// box-shadow: 1px 1px 1px #888888;
				border: 1px solid #B0B0B0;
				border-radius: 3px;
			}
			.detail-section {
				width: 100%;
				height: 80px;
				display: flex;
				justify-content: space-around;
				.section-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 30%;
					height: 100%;
					// padding: 5px;
				}
				.section-right {
					// text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					width: 70%;
					padding: 3px;
					height: 100%;
				}
			}
			.detail-section-3 {
				height: 100px;
				width: 100%;
				display: flex;
				justify-content: space-around;
				>div {
					display: flex;
					align-items: center;
					justify-content: space-around;
					flex-direction: column;
					width: 33%;
					height: 100%;
					.icon {
						height: 44px;
						line-height: 55px;
						i {
							font-size: 43px;
						}
					}
				}
			}
			.detail-section-2 {
				height: 150px;
				width: 100%;
				>div:nth-of-type(1) {
					border-bottom: 1px solid #7f93aa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
				>div {
					height: 50%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #7f93aa;
		height: 400px;
	}
	
	.grid-content1 {
		// box-shadow: 2px 2px 5px #888888;
		border: 1px solid #B0B0B0;
		border-radius: 3px;
		margin-top: 1px;
		height: 100%;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>